<template>
    <div>
     <el-button  @click="dialogVisible = true">添加信息</el-button>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible">
  <el-form ref="form" label-width="80px" :model="formData">
    <el-form-item label="姓名"  prop="name">
          <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age" >
          <el-input v-model="formData.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" >
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
      </el-dialog>


    <el-form  :model="searchFormData" :inline='true' ref="searchForm">
    <el-form-item label="问题内容" prop="questionContent">
        <el-input v-model="searchFormData.questionContent" placeholder="问题内容"></el-input>
    </el-form-item>
    <el-form-item label="状态"  prop="status">
          <el-input v-model="searchFormData.status" placeholder="状态"></el-input>
    </el-form-item>
    <el-form-item>
              <el-button type="primary" @click="getTableData">搜索</el-button>
              <el-button @click="reset">重置</el-button>
    </el-form-item>
    </el-form>
              {{searchFormData}}
         <el-table :data="tableData">
      <el-table-column width="150px" label="问题ID" prop="questionId"></el-table-column>
      <el-table-column width="150px" label="问题内容" prop="questionContent"></el-table-column>
      <el-table-column width="150px" label="问题回复" prop="questionAnswer"></el-table-column>
      <el-table-column width="150px" label="状态" prop="status"></el-table-column>
      <el-table-column  label="操作" fixed="right" width="200px" >
        <template slot-scope="scope" >
        <el-button type="text" >编辑</el-button>
        <el-button type="text" @click="deleteData(scope.row)">删除</el-button>
        
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
  </div>

</template>

<script>
import axios from 'axios'
export default {
    data() {
        return{
            dialogVisible:false,
            formData:{
              name:'',
              age:'',
            },
            tableData:[],
            pageIndex:1,
            pageSize:10,
            total:0,
            searchFormData:{
              questionContent:'',
              status:''
            }
        }
    },
    mounted(){
        this.getTableData()
    },
     methods: {
         getTableData(){
           axios.get('http://127.0.0.1:3000/api/test/crud/list',{
             params:{
             pageIndex:this.pageIndex,
             pageSize:this.pageSize,
             questionContent:this.searchFormData.questionContent,
             status:this.searchFormData.status,
             }
           }).then(res=>{
             console.log(res);
             this.tableData=res.data.data
             this.total=res.data.total
           })
         },
         reset(){
          this.$refs.searchForm.resetFields()

          this.getTableData()
         },
         deleteData(row){
             this.$confirm("确定删除该条数据？").then(()=>{
             axios.delete('http://127.0.0.1:3000/api/test/crud/delete',{
               params:{questionId:row.questionId}
                 }).then(res=>{
                 console.log(res);
                 this.getTableData()
            })
     })    
    },
         cancel(){
               this.$refs.form.resetFields()
               this.dialogVisible=false
         },
         confirm(){
               this.$refs.form.resetFields()
               this.dialogVisible=false
         },
         //分页条数变动的时候触发的方法
      handleSizeChange(value) {
        console.log('每页',value+'条');
         this.pageSize=value
         this.getTableData()
      },
      //切换页码触发的方法
      handleCurrentChange(value) {
        console.log('当前页:',value);
         this.pageIndex=value
         this.getTableData()
      
      },

    },
      
}
</script>